<template>
<el-dialog class="single-dialog" :append-to-body="true" :title="data.title" :visible.sync="data.show" width="860px" :close-on-click-modal="false">
    <el-input clearable placeholder="输入关键字搜索列，包含关键字即可" suffix-icon="el-icon-search" v-model="val"></el-input>
    <div class="wrap">
        <div class="left-wrap">
            <div class="wrap-header">
                <span>选择</span>
            </div>
            <div class="scroll-bar">
                <el-collapse v-if="Object.keys(dataObj).length>0" v-model="activeName">
                    <el-radio-group class="my-radio" v-model="editInfo">
                        <el-collapse-item :title="key" :name="`${i}`" v-for="(value, key, i) in dataObj" :key="i">
                            <el-radio :label="subItem" v-for="(subItem, n) in value" :key="n">{{subItem}}</el-radio>
                        </el-collapse-item>
                    </el-radio-group>
                </el-collapse>
                <div v-else class="empty-box">暂无数据</div>
            </div>
        </div>
        <div class="right-wrap">
            <div class="wrap-header">
                <span>已选</span>
                <el-radio-group size="mini" v-model="btnVal">
                    <el-radio-button :label="true">列表</el-radio-button>
                    <el-radio-button :label="false">编辑</el-radio-button>
                </el-radio-group>
            </div>
            <div class="scroll-bar" v-if="btnVal">
                <el-table size="mini" :data="tableData">
                    <el-table-column align="center" width="55">
                        <template slot="header">
                            <i class="el-icon-delete" @click="editInfo=''"></i>
                        </template>
                        <template>
                            <i class="el-icon-delete" @click="editInfo=''"></i>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="field" label="字段" show-overflow-tooltip></el-table-column>
                    <el-table-column align="center" prop="type" label="类型" show-overflow-tooltip></el-table-column>
                </el-table>
            </div>
            <el-input v-else type="textarea" placeholder="请编辑" v-model="editInfo"></el-input>
        </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="data.show=false">取 消</el-button>
      <el-button type="primary" v-preventReClick="2000" @click="handleSave">确 定</el-button>
    </span>
</el-dialog>
</template>

<script>
export default {
    name: 'SingleSelectField',
    props: {
        data: {
            type: Object
        }
    },
    computed: {
        dataObj () {
            let obj = Object.assign({}, this.obj)
            for (const key in obj) {
                obj[key] = this.val ? obj[key].filter(v => v.includes(this.val)) : obj[key]
            }
            return obj
        }
    },
    created () {
        this.init()
    },
    watch: {
        editInfo () {
            this.getTableList(this.editInfo && !this.data.data.length)
        }
    },
    data () {
        return {
            tableData: [],
            obj: null,
            activeName: [],
            editInfo: '',
            val: '',
            btnVal: true
        }
    },
    methods: {
        init () {
            this.editInfo = this.data.value
            let list = this.data.data
            let obj = {}
            for (let i = 0; i < list.length; i++) {
                const {
                    type,
                    name
                } = list[i]
                if (obj.hasOwnProperty(type)) {
                    obj[type].push(name)
                } else {
                    obj[type] = [name]
                }
            }
            this.obj = obj
            this.activeName = Object.keys(this.obj).map((v, i) => `${i}`)
        },
        getTableList (flag) {
            let obj = Object.assign({}, this.obj)
            let arr = Object.keys(obj)
            let list = []
            if (arr.length > 0) {
                let type = '--'
                for (const key in obj) {
                    for (let i = 0; i < obj[key].length; i++) {
                        if (this.editInfo === obj[key][i]) {
                            type = key
                            break
                        }
                    }
                }
                list = this.editInfo ? [{
                    field: this.editInfo,
                    type
                }] : []
            } else {
                list = []
            }
            this.tableData = !flag ? list : [{ field: this.editInfo, type: '--' }]
        },
        handleSave () {
            this.$emit('save', 'single', this.editInfo)
        }
    }
}
</script>

<style lang="less">
.single-dialog {
    .wrap {
        height: 500px;
        display: flex;

        .empty-box {
            width: 100%;
            height: 95px;
            border: 1px solid #ebeef5;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: #909399;
        }

        .scroll-bar {
            max-height: 450px;
        }

        .el-textarea {
            height: 100%;
        }

        .el-textarea__inner {
            height: calc(100% - 50px);
            line-height: initial;
        }

        .el-icon-delete {
            cursor: pointer;
            font-size: 18px;
        }

        .el-collapse-item__content {
            padding: 0;
            display: flex;
            flex-direction: column;
        }

        .el-collapse,
        .table {
            border: 1px solid #ebeef5;
        }

        .el-collapse-item__header {
            background: #e3f4ff;
            height: 31px;
            line-height: 31px;
            padding-left: 10px;
        }

        .my-radio {
            display: flex;
            flex-direction: column;

            .el-radio {
                border-top: 1px solid #ebeef5;
                line-height: 31px;
                margin: 0;
                padding-left: 20px;
            }
        }

        .left-wrap {
            width: 50%;
            float: left;
            margin-right: 10px;
        }

        .right-wrap {
            width: 50%;
            float: right;
            margin-left: 10px;
        }

        .wrap-header {
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .el-icon-delete {
            color: #909399;
        }
    }
}
</style>
